<template>
	<view class="page-bg-hy">
		<view class="page-hy">
			<navbar title="蜂竞技-魔力部首-创建房间" />

			<!-- 创建房间确认弹框 -->
			<selectContentView v-if="showPromptbox" :msg="msg" confirmTitle="确认" cancelTitle="取消" @confirm="confirmCreate"
				@cancel="showPromptbox=false"></selectContentView>

			<view class="container">
				<view class="page-h1 hzgb">{{user_info.username}}的房间</view>
				<view class="pwd">
					<uv-input class="pwd-input" :type="text" placeholder="设置房间密码"
						placeholderStyle="font-size: 14px;text-align: center;" v-model="pwd"></uv-input>
					<!-- <image class="eye" @click="eyeFn()"
						:src="'../../../static/image/icon_pwd' + (pwdType === 'text' ? '' : '_hide') + '.png'" mode="">
					</image> -->
				</view>
				<view class="page-h3">选择组别
					<view class="btn-en">Select Group</view>
				</view>
				<view class="flex">
					<view class="float" v-for="(item, index) in type_list" :key="index">
						<view @click="fnSelectType(item, index)" class="level-item"
							:class="current_type_info.id === item.id ? 'active' : ''">
							<view class="level-icon">
								<image class="icon" src="/static/image/fengyongyanxuan/game-mlbs.png" mode="heightFix">
								</image>
							</view>
							<view class="label">{{item.title}}
								<view class="title-en-common-10">{{ item.alias }}</view>
							</view>
						</view>
						<image v-if="item.isExpired == 1" class="lock" src="../../../static/image/course/course-lock.png" mode="widthFix"></image>
					</view>
				</view>
				<view v-show="false" class="page-h3">选择人数
					<view class="btn-en"> Select Number of spellers</view>
				</view>
				<view v-show="false" class="card">
					<view class="slider_box">
						<uv-slider v-model="people_num" @change="changePeopleNum" :min="game_config.min_people_num"
							:max="game_config.max_people_num" blockSize="28" step="1" activeColor="#f0d76f"
							inactiveColor="#fff" block-color="#deba5e" blockStyle="height:70px"></uv-slider>
						<view class="slider_num">
							<view>{{game_config.min_people_num}}</view>
							<view>{{game_config.max_people_num}}</view>
						</view>
						<view class="slider_btn">
							{{people_num}}人
						</view>
					</view>
				</view>
				<view class="page-h3" style="height: 50px;"></view>
				<view class="btns">
					<view class="btn btn1" @click="fnCancelCreate()">取消
						<view class="btn-en">Cancel</view>
					</view>
					<view class="btn btn2" @click="fnCreateRoom()">确认创建
						<view class="btn-en">Confirm Create</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import navbar from '../../../components/gamesNav.vue'
	export default {
		config: {
			disableScroll: true
		},
		components: {
			navbar
		},
		data() {
			return {
				text: '',
				game_mode: '',
				game_config: {},
				errMsg: '',
				pwd: '',
				people_num: 2,
				pwdType: 'password',
				type_list: [],
				current_type_info: {},
				userLevel: 0, // 当前选手所在组别
				user_info: {},
				game_info: {},
				showPromptbox: false,
			};
		},
		onLoad(options) {
			var that = this;
			that.user_info = JSON.parse(uni.getStorageSync('USER_INFO'));
			that.game_info = JSON.parse(decodeURIComponent(options.game_info));
			that.game_mode = options.game_mode;
			console.log(that.user_info, that.game_info);
			// 当前选手组别
			const grade = Number(this.user_info.grade)
			this.userLevel = grade < 2 ? 1 : grade < 4 ? 2 : grade < 6 ? 3 : grade < 9 ? 4 : 0
			console.log('创建房间：', that.game_info, that.game_mode)

			that.getGameConfigInfo();
		},
		mounted() {
			const that = this
			that.getTypeList();
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		onShow() {
			const that = this
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		methods: {
			// 获取游戏配置信息
			getGameConfigInfo() {
				var that = this;
				that.$http.getGameConfigInfo({
					'game_id': that.game_info.id,
					'game_mode': that.game_mode
				}).then(res => {
					if (res.code === 200) {
						that.game_config = res.data;
						that.people_num = that.game_config.default_people_num;
					}
				})
			},

			// 创建房间
			fnCreateRoom() {
				var that = this;
				if (that.current_type_info && that.current_type_info.id) {
					this.errMsg = ''
				} else {
					this.errMsg = '请选择组别'
				}
				if (!this.errMsg) {
					that.msg = "您正在创建【" + that.game_info.name + "】游戏，人数" + that.people_num + "人";
					that.showPromptbox = true
				} else {
					uni.showToast({
						title: this.errMsg,
						icon: 'none',
						duration: 2000
					})
				}
			},

			// 取消创建房间
			fnCancelCreate() {
				var that = this;
				uni.navigateBack();
			},

			// 确认创建
			confirmCreate() {
				this.showPromptbox = false
				var that = this;
				const params = {
					matchType: 'mlbs',

					game_id: that.game_info.id,
					people_num: that.people_num,
					pwd: that.pwd,
					type_id: that.current_type_info.id,
					game_mode: that.game_mode,
					groupname: that.game_mode + '|' + that.current_type_info.title,
				}

				that.$http.createRoom(params).then(res => {
					if (res.code === 200) {
						var group_info = res.data;
						uni.redirectTo({
							url: '/pages/games/mlbs/game_mlbs' +
								'?group_info=' + encodeURIComponent(JSON.stringify(group_info)) +
								'&game_mode=' + that.game_mode +
								'&game_info=' + encodeURIComponent(JSON.stringify(that.game_info))
						})
					}
				})
			},

			fnSelectType(item, index) {
				var that = this;
				if (item.isExpired == 1) {
					// uni.showToast({
					// 	title: '暂不可用',
					// 	icon: 'none',
					// 	duration: 2000
					// })
					return false;
				}
				that.current_type_info = item;
			},

			// 获取分组
			getTypeList() {
				var that = this;
				that.$http.getTypeListHy({
					pid: 9000,
				}).then(res => {
					if (res.code === 200) {
						that.type_list = res.data;
						console.log(this.userLevel)
						const obj = this.type_list.find(item => item.sort_number == this.userLevel)
						this.current_type_info = obj.isExpired == 0 ? obj : this.type_list[0].isExpired == 0 ? this.type_list[0] : {}

						// this.current_type_info = this.type_list.find(item => item.sort_number == this.userLevel) ||
						// 	this.ciku_list[0]
						// this.type_list.forEach(item => {
						// 	if (item.sort_number === this.userLevel || item.sort_number === 4) {
						// 		item.usable = true
						// 	} else {
						// 		item.usable = false
						// 	}
						// })
						// console.log(this.type_list)
					}
				})
			},

			// 改变人数
			changePeopleNum(e) {
				console.log(e)
			},

			eyeFn() {
				this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
			},

			cancelFn() {},
		}
	}
</script>

<style lang="less" scoped>
	.page-bg-hy {
		background: radial-gradient(circle, #373632, #130e00);
		width: 100%;
		height: 100vh;
	}
	.page-hy {
		background-image: url(/static/image/homePage/diwen-hy.png);
		background-size: 100px 100px;
		background-position: center;
		width: 100%;
		height: 100vh;
		font-family: hzgb;
		color: #fff;
	}

	.container {
		padding: 24px 14px;
	}

	.page-h1 {
		font-size: 24px;
	}

	.page-h3 {
		font-size: 16px;
		text-align: center;
		margin-bottom: 16px;
		margin-top: 40px;
	}

	.pwd-input {
		border: none;
		border-width: 0 !important;
		font-size: 14px;
		font-family: normal;
		text-align: center;

		&.uv-border {
			border-width: 0 !important;
		}
	}

	.pwd {
		width: 100%;
		height: 36px;
		background: #fff8e1;
		border-radius: 32px;
		box-sizing: border-box;
		padding-left: 8px;
		padding-right: 2px;
		margin-top: 40px;
		position: relative;

		.eye {
			position: absolute;
			right: 10px;
			top: 0;
			height: 30px;
			width: 30px;
			margin-top: 3px;
		}
	}

	// 创建房间页面，选择人数的滑块样式
	::v-deep .uni-slider-handle-wrapper {
		height: 14px !important;
		border-radius: 14px !important;
	}

	::v-deep .uni-slider-track {
		border-top-left-radius: 14px;
		border-bottom-left-radius: 14px;
	}

	.card {
		background: rgba(255, 255, 255, 0.15);
		border-radius: 14px;
		padding: 10px 10px 20px;
	}

	.slider_num {
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 18px;
	}

	.slider_btn {
		border: 2px solid #242018;
		background: linear-gradient(to bottom, #151004, #353330);
		height: 30px;
		width: 110px;
		text-align: center;
		line-height: 26px;
		border-radius: 30px;
		margin: 0 auto;
		font-size: 14px;
	}

	.btns {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 60px 0 40px;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;

		.btn {
			width: 140px;
			height: 40px;
			text-align: center;
			// line-height: 40px;
			padding-top: 6px;
			font-size: 16px;
			border-radius: 10px;
		}

		.btn1 {
			background: linear-gradient(to top, #130e00, #373632);
			box-shadow: 0 6px 0 0 #363531;
		}

		.btn2 {
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0 6px 0 0 #d9b059;
			color: #000;
		}
	}

	.flex {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		overflow: hidden
	}

	.float {
		float: left;
		width: 50%;
		padding: 6px;
		box-sizing: border-box;
		position: relative;
		.lock {
			position: absolute;
			right: 14px;
			bottom: 14px;
			width: 20px;
			height: 20px;
		}
	}

	.level-item {
		width: 100%;
		background: rgba(255, 255, 255, 0.15);
		border: 3px solid transparent;
		border-radius: 14px;
		padding: 10px;
		text-align: center;
		font-size: 16px;
		display: flex;
		align-items: center;

		.level-icon {
			width: 60px;
			height: 60px;
			// margin-bottom: 12px;
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 6px;
			border: 2px solid #fde458;

			.icon {
				width: 36px;
				height: 36px;
				margin-bottom: 8px;
			}
		}

		.label {
			flex: 1;
		}

		&.active {
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			border-color: #fde458;
			color: #000;

			.level-icon {
				background: linear-gradient(to bottom, #130e00, #373632);
				border-color: #31302d;
			}
		}
	}

	::v-deep .uni-input-input {
		text-align: center;
	}
</style>